<template>
  <div class="financeVerify">
    <el-breadcrumb class="breadcrumb" separator="/">
      <el-breadcrumb-item :to="{ path: '/financeNotificationList' }">订单查询</el-breadcrumb-item>
      <el-breadcrumb-item>打款确认</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="financeVerify-content">
      <div class="title">打款申请</div>
      <div>
        <el-row class="info-row">
          <el-col :span="8" class="info-label">
            业务员：
            <label class="text">{{verify.staff}}</label>
          </el-col>
          <el-col :span="8" class="info-label">
            所属部门：
            <label class="text">{{verify.dep}}</label>
          </el-col>
          <el-col :span="8" class="info-label">
            申请日期：
            <label class="text">{{verify.gmtCreate}}</label>
          </el-col>
        </el-row>
      </div>
      <div class="title">打款信息</div>
      <div>
        <el-row class="info-row">
          <el-col :span="8" class="info-label">
            单位名称：
            <label class="text">{{verify.company}}</label>
          </el-col>
          <el-col :span="8" class="info-label">
            银行账号：
            <label class="text">{{verify.bankAccount}}</label>
          </el-col>
          <el-col :span="8" class="info-label">
            开户银行：
            <label class="text">{{verify.bankOpen}}</label>
          </el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="8" class="info-label">
            金额：
            <label class="text">{{verify.amount}}</label>
          </el-col>
          <el-col :span="8" class="info-label">
            大写：
            <label class="text">{{verify.amountBig}}</label>
          </el-col>
          <el-col :span="8" class="info-label">
            支付方式：
            <label class="text">网银</label>
          </el-col>
        </el-row>
      </div>
      <div class="title">客户贷款信息</div>
      <div>
        <el-row class="info-row">
          <el-col :span="8" class="info-label">
            客户姓名：
            <label class="text">{{verify.customerName}}</label>
          </el-col>
          <el-col :span="8" class="info-label">
            身份证号码：
            <label class="text">{{verify.IDCard}}</label>
          </el-col>
          <el-col :span="8" class="info-label">
            贷款银行：
            <label class="text">{{verify.bankLoan}}</label>
          </el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="8" class="info-label">
            车辆型号：
            <label class="text">{{verify.carModel}}</label>
          </el-col>
          <el-col :span="8" class="info-label">
            贷款期限：
            <label class="text">{{verify.limitName}}</label>
          </el-col>
        </el-row>
      </div>
      <p/>
      <p/>
      <hr/>
      <p/>
      <p/>
      <el-button @click="init()">上传附件</el-button>
      <el-button type="primary" @click="submit()" v-show="submitShow">打款确认</el-button>
    </div>
    <el-dialog title="上传附件" :visible.sync="fileUpload" :modal-append-to-body='false' class="fileUploadWindow">
      <el-form :model="fileUploadDialog" class="fileContent" label-position="left" label-width="100px">
        <div class="title">财务部附件</div>
        <div>
          <upload class="upload" ref="finance"></upload>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {
    upload: require('../../components/other/upload')
  },
  name: 'creditInput',
  data() {
    return {
      verify: {
        staff: '',
        gmtCreate: '',
        dep: '',
        company: '',
        bankAccount: '',
        bankOpen: '',
        amount: '',
        amountBig: '',
        payment: '',
        use: '',
        customerName: '',
        IDCard: '',
        bankLoan: '',
        carModel: '',
        limit: '',
        limitName: '',
        annexBatchNo: '',
      },
      fileUpload: false,
      submitShow: true,

    }

  },
  methods: {
    submit() {
      const h = this.$createElement;

      this.$confirm('确认已打款吗?', '打款确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$http.post('/paymentRequest/notification', {
            "orderNo": this.$route.query.id,
            "taskId": this.$route.query.taskId,
            "flowNodeId": this.$route.query.flowNodeId,
            "bizType": this.$route.query.bizType,
            "approvalResult": "1",
            "approvalRemark": "同意"
          })
          .then((response) => {
            if (response.data.success) {
              this.$confirm('打款确认成功！', '操作成功', {
                confirmButtonText: '知道了',
                cancelButtonText: '关闭',
                type: 'success'
              }).then(() => {
                this.submitShow = false;
              }).catch(() => {});
            } else {
              this.$message.error(response.data.message);

            }


          })


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    init() {
      this.fileUpload = true;
      this.$nextTick(() => {
        this.$refs.finance.isOne = false;
        this.$refs.finance.type = 1;
        this.$refs.finance.id = this.verify.annexBatchNo;
        this.$refs.finance.group = 5;
        this.$refs.finance.isSecondDialog = true;
      });

    }

  },
  mounted() {
    this.$store.commit('bank', this);
    this.$store.commit('loanPeriod', this);
    let that = this;
    this.$http.get('/paymentRequest/detail/' + this.$route.query.id)
      .then((response) => {
        if (response.data.success) {
          this.verify.staff = response.data.data.staffName;
          this.verify.dep = response.data.data.deptName;
          this.verify.gmtCreate = response.data.data.gmtCreate.substring(0, 10);
          this.verify.company = response.data.data.payeeAccountName;
          this.verify.bankAccount = response.data.data.payeeBankCard;
          this.verify.bankOpen = response.data.data.payeeBankName;
          this.verify.amount = response.data.data.loaningAmount;
          this.verify.annexBatchNo = response.data.data.annexBatchNo;
          this.verify.payment = response.data.data.paymentWay;
          this.verify.use = response.data.data.loanUseage;
          this.verify.customerName = response.data.data.customerName;
          this.verify.bankLoan = response.data.data.loanBankName;
          this.verify.carModel = response.data.data.carModel;
          this.verify.limit = response.data.data.period;
          this.verify.limitName = that.$libs.jsonGetName(that.$store.state.loanPeriod, response.data.data.period);
          this.verify.IDCard = response.data.data.idCard;
          this.verify.amountBig = this.$libs.digitUppercase(response.data.data.loaningAmount);

        }
      })
      .catch(function(eror) {

      });


  }
}

</script>
<style lang="scss">
@import '../../assets/css/site.scss';
.financeVerify {
  padding: 0px 16px;
  position: relative;
  font-size: 14px;
  color: #475669;

  .financeVerify-content {
    background: #fff;
    position: fixed;
    top: 96px;
    bottom: 10px;
    left: 216px;
    right: 16px;
    overflow: auto;
    padding: 20px;
  }

  .breadcrumb {
    color: #99A9BF;
    font-size: 14px;
    line-height: 18px;
    margin: 18px 0px 10px 0px;
  }
  .fileUploadWindow {
    // width: 200px;
    height: 600px;
  }
  .fileContent {
    margin: 0 30px;
  }
  .info {
    text-align: right;
    font-size: 12px;
    color: #666666;
    .text {
      color: #2A2A2A;
    }
  }

  .credit-button-assure {
    margin-left: 14px;
  }
  .upload {
    margin-top: 20px;
  }
}

</style>
